<template>
    <div ref="echartDom"></div>
</template>

<script setup lang="ts">
/*
传参格式：
写出来的都是必传
可以自己加参数会追加
    legendStyle = {// 图例样式
      show: true,
      icon: "rect",
      left: 0,
      top: 0,
      itemWidth: 0,
      itemHeight: 0,
      itemGap: 0,
    };
    gridConfig = {// 网格样式
    };
     seriesStyle:{//series数据样式
        radius: [15, 50],
        center: ['25%', '55%'],
    },
    seriesData:[//series数据
        [
        { value: 26, name: '实物配租' },
        { value: 5, name: '共有产权房' },
        { value: 20, name: '租金补贴' },
        { value: 5, name: '其他' },
        ]
    ]
*/
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,toRaw,watchEffect } from "vue";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
});
// 数据定义
const echartDom = ref(null);
    const myChart = shallowRef(null);
    const echarts = inject('echarts');

 // 字体自适应方法
 const pxToRem = (px: number) => {
    const scale = document.documentElement.clientWidth / 1920;
    return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendStyle = props.housingSupplyStatsData.legendStyle//图例
let seriesData = props.housingSupplyStatsData.seriesData//serires数据
let xAxisData = props.housingSupplyStatsData.xAxisData //x数据


const getEchart = () => {
  console.log(props.housingSupplyStatsData, '2233')
    console.log(seriesData, 'ssss')
    console.log(xAxisData)
 
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
      // 图例配置
      const legendConfig = {
        show: legendStyle.show,
        icon: legendStyle.icon,
        left: pxToRem(legendStyle.left)? pxToRem(legendStyle.left):legendStyle.left,
        right:pxToRem(legendStyle.right),
        top: pxToRem(legendStyle.top),
        bottom: pxToRem(legendStyle.bottom),
        itemWidth: pxToRem(legendStyle.itemWidth),
        itemHeight: pxToRem(legendStyle.itemHeight),
        itemGap: pxToRem(legendStyle.itemGap),
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(12),
          rich:{
            one:{
              width:pxToRem(100),
            },
            two:{
              width:pxToRem(50),
            },
            three:{
              width:pxToRem(50),
            }
          },
          padding: [0, 0, pxToRem(-3), 0],
        },
      };
       // 追加项
       for(let j in legendStyle){
        if(j != 'show' && j != 'icon'  && j != 'left'  && j != 'right' && j != 'top' && j != 'itemWidth'  && j != 'itemHeight'   && j != 'itemGap'  && j != ' textStyle'){
          legendConfig[j] = toRaw(legendStyle[j])
        }
      }
      // series配置
     let seriesConfig = seriesData.map((item,index) => {
          return{
            name: item.name,
            type:'line',
            symbol: 'none',
            sampling: 'lttb',
            data:toRaw([[xAxisData[index],item.numericalMap[index],item.yoyMap[index], item.chainMap[index]]])
          }
      })
      //绘图
      const option = {
        xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLabel: {
    color: '#fff',
    fontSize: 12,
  },
  splitLine: {
      show: false // 隐藏 x 轴网格线
    }
    },
    yAxis: {
      axisLabel: {
    color: '#fff',
    fontSize: 12,
  },
      interval: 1,
      type: 'value',
      boundaryGap: [0.6, 0.6],
      max: 'dataMax',
      splitLine: {
      show: false // 隐藏 y 轴网格线
    }
    },
    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 10
                    },
                    {
                        start: 0,
                        end: 10
                    }
                ],
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            console.log(params, 'ppp')
        let html = `${params[0].name}<br>`;
        params.forEach((item) => {
          html += `${item.seriesName}：${item.value[1]}<br>`;
          if (item.value[2] !== -1) {
            html += `同比：${item.value[2]}<br>`;
          }
          if (item.value[3] !== -1) {
            html += `环比：${item.value[3]}<br>`;
          }
        });
        return html;
      },
          // axisPointer: {
          //   type: "line",
          //   lineStyle: {
          //     color: "rgba(40,252,255,0.6)",
          //     shadowBlur: 10,
          //     shadowColor: "rgba(0, 0, 0, 0.9)",
          //   },
          // },
          // position: function (point, params, dom, rect, size) {
          //   return [point[0], '5%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
          // },
          textStyle: {
            color: "#fff",
            fontSize: pxToRem(14),
          },
          backgroundColor: "rgba(8, 64, 132, 0.9)",
          borderColor:'#fff',
        },
          legend: legendConfig,
          series:seriesConfig
      }
      console.log('option',option)
    myChart.value.setOption(option);
  }
};
const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
   legendStyle = props.housingSupplyStatsData.legendStyle//图例
   seriesData = props.housingSupplyStatsData.seriesData//serires数据
   xAxisData = props.housingSupplyStatsData.xAxisData
  getEchart();
};

watchEffect(() => {
updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 销毁旧图表实例
    }
    getEchart(); // 创建新的图表实例
  });
});

onUnmounted(() => {
  window.removeEventListener("resize", () => {
    if (myChart.value) {
      myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
    }
  });
});
</script>

<style scoped lang="less">
.line_box{
    width: 100%;
    height: 100%;
}
.echarts-background {
  background-color: transparent !important;
}
.h200 {
        height: 200px;
    }
.h180 {
        height: 180px;
    }
    .h140 {
        height: 140px;
    }
</style>
